<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        .pages>span{
            display: inline-block;
            background-color: #ddd;
            text-align: center;
            padding: 5px;
            margin: 0px 5px;
            min-width: 30px;
            cursor: pointer;
        }
        .pages>span.curr{
            background-color: #aaa;
        }
    </style>
</head>
<body>
<div id="app">
    <my-page total="100" size="30" @change="query"></my-page>
    <hr>
    第 {{page}} 页 , 每页 {{size}} 行
</div>

<script>
    Vue.component("my-page",{
        props:["total","size"],
        data(){
            return {
                pages:0,  // 总页数
                current:0 // 当前页
            };
        },
        created(){
            this.pages = this.total / this.size;
            this.pages = Math.ceil(this.pages); // 向上取整
            if(this.pages>0){
                this.current = 1;
            }
        },
        template:`
            <div class="pages">
                <span @click="setPage(1)">首页</span>
                <span @click="addPage(-1)">上一页</span>
                <span v-for="p in pages"
                        :class="{ curr : p == current }"
                        @click="setPage(p)">
                    {{p}}
                </span>
                <span @click="addPage(1)">下一页</span>
                <span @click="setPage(pages)">尾页</span>
            </div>
        `,
        methods: {
            addPage(num){
                if(num==1 && this.current < this.pages){
                    this.current++;
                } else if(num==-1 && this.current>1){
                    this.current--;
                }
                this.$emit("change", this.current, this.size);
            },
            setPage(num){
                this.current = num;
                this.$emit("change", this.current, this.size);
            }
        }

    })

    var v = new Vue({
        el : "#app",
        data : {  page:1, size:30 },
        methods:{
            // page 第几页 从1开始, size 每页行数
            query(page, size){
                this.page = page;
                this.size = size;
            }
        }

    })


</script>


</body>
</html>